<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>


    <!--时间日期选择文件依赖-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
   

</head>

<body>
    <!--HTML-->
    <p class="magic-desc">添加任务</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务名称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" placeholder="请输入任务名称">
            </div>
        </div>


        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务星级</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="validation_select" class="bk-form-select">
                    <option value="beijing">一星任务</option>
                    <option value="shanghai">一星任务</option>
                    <option value="guangzhou">一星任务</option>
                    <option value="shenzhen">一星任务</option>
                </select>
            </div>
        </div>
       
<input type="text" class="form-control daterangepicker_demo" id="daterangepicker_demo3" placeholder="选择日期...">
<script type="text/javascript">
    // 综合示例
    $('#daterangepicker_demo3').daterangepicker({
        "showDropdowns": true,//显示年，月下拉选择框
        "showWeekNumbers": true,//显示第几周
        "timePicker": true,//时间选择
        "timePicker24Hour": true,//24小时制
        "timePickerIncrement": 1,//时间间隔
        "timePickerSeconds": true,
        "dateLimit": { //可选择的日期范围
            "days": 30
        },
        "ranges": {
            "前7天" : [moment().subtract(6, 'days'), moment()],
            "前30天" : [moment().subtract(29, 'days'), moment()],
            "本月" : [moment().startOf('month'), moment().endOf('month')],
            "上个月" : [moment().subtract(1,'month').startOf('month'), moment().subtract(1,'month').endOf('month')],
        },
        "locale": {
            "format": "YYYY-MM-DD HH:mm:ss",// 日期格式
            "separator": " 至 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "从",
            "toLabel": "到",
            "weekLabel": '周',
            "customRangeLabel": "自定义",
            "daysOfWeek": [
                "日",
                "一",
                "二",
                "三",
                "四",
                "五",
                "六"
            ],
            "monthNames": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            "firstDay": 1// 周开始时间
        },
        "startDate": "2015-07-01 10:35:20",
        "endDate": "2015-08-15 10:35:20",
        "opens": "center",//left/center/right
        "drops": "up",//选择框出现的位置 up/down
        "buttonClasses": "btn btn-sm",//按钮通用样式
        "applyClass": "btn-success",//确定按钮样式
        "cancelClass": "btn-default"//取消按钮样式
    });
</script>

        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">备注</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <textarea name="" id="" class="bk-form-textarea" placeholder=""></textarea>
            </div>
        </div>


        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>


    </form>
<div class="input-group date" id="plugin9_demo1" data-date="2015-01-01T09:00:07Z" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    <input class="form-control" size="16" type="text" value="" placeholder="选择日期范围">
    <input type="hidden" id="dtp_input1" value="">
    <br>
</div>
<script type="text/javascript">
    // 日期选择器(Bootstrap)-1，日期时间选择
    $('#plugin9_demo1').datetimepicker({
        language:  'zh-TW',
        weekStart: 1,
        todayBtn:  true,
        autoclose: true,
        todayHighlight: true,
        startView:2,
        forceParse: false,
    });
</script>
    

</body>

</html>